import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  Text,
  ScrollView,
  TouchableOpacity,
} from 'react-native'

// 省略符公共方法
import {
  messageEllipsis,
  systemEllipsis
} from '../../../utils/publicMethodList';

export default class functionMenuList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      friendNotificationList: [
        {
          // 对方的头像
          headPortrait: require("../../../assets/images/iconResources/unsplash_GM.png"),
          // 对方发送的消息
          messagesParty: "你可以给我一些帮助嘛？",
          title: "小明",
          meesage: "附近居民有空调........",
          time: "11:22",
          notice: 1,
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_GM.png"),
          messagesParty: "你可以给我一些帮助嘛？你可以给我一些帮助嘛？",
          title: "小红",
          meesage: "附近居民有空调........",
          time: "11:22",
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_Xm.png"),
          title: "小何",
          meesage: "附近居民有空调........",
          time: "11:22",
          messagesParty: "你可以给我一些帮助嘛？你可以给我一些帮助嘛？",
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_Xm.png"),
          title: "明明",
          meesage: "附近居民有空调........",
          time: "11:22",
          messagesParty: "你可以给我一些帮助嘛？",
        },
      ],
      // 临时消息列表数据 
      temporaryMessageList: [
        {
          // 对方的头像
          headPortrait: require("../../../assets/images/iconResources/unsplash_GM.png"),
          // 对方发送的消息
          messagesParty: "你可以给我一些帮助嘛？",
          title: "小明",
          meesage: "附近居民有空调........",
          time: "11:22",
          notice: 1,
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_GM.png"),
          messagesParty: "你可以给我一些帮助嘛？你可以给我一些帮助嘛？",
          title: "小红",
          meesage: "附近居民有空调........",
          time: "11:22",
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_Xm.png"),
          title: "小何",
          meesage: "附近居民有空调........",
          time: "11:22",
          messagesParty: "你可以给我一些帮助嘛？你可以给我一些帮助嘛？",
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_Xm.png"),
          title: "明明",
          meesage: "附近居民有空调........",
          time: "11:22",
          messagesParty: "你可以给我一些帮助嘛？",
        },
      ],
      // 系统消息列表数据 
      systemMessageList: [
        {
          time: "12-05",
          title: "恭喜你获得官方奖励",
          systemMessageList: "因近期持续发布社圈文本文本文本文布社圈因近期持续文本文本",
        },
        {
          time: "12-05",
          title: "恭喜你获得官方奖励恭方奖励励",
          systemMessageList: "因近期持续发布社圈文近期持续发布社圈本文本文本文本文本",
        },
        {
          time: "12-05",
          title: "恭喜你获得官方官方奖励",
          systemMessageList: "因近期持续发圈本文本社圈文本文本文本文本文本文本",
        },
        {
          time: "12-05",
          title: "恭喜你获得官方奖励",
          systemMessageList: "因近期持续发布社圈文本布社圈文本文本文本文本文本文本文本",
        },
        {
          time: "12-05",
          title: "恭喜你获得官方奖励恭喜方奖励",
          systemMessageList: "因近期持续发布社圈文本文本文文本文本文文本文本文本文本",
        },
      ],
      // 好友列表数据区
      friendNotificationLista: [
        {
          // 对方的头像
          headPortrait: require("../../../assets/images/iconResources/unsplash_GM.png"),
          // 对方发送的消息
          messagesParty: "你可以给我一些帮助嘛？",
          title: "小明",
          meesage: "附近居民有空调........",
          time: "11:22",
          notice: 1,
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_GM.png"),
          messagesParty: "你可以给我一些帮助嘛？你可以给我一些帮助嘛？",
          title: "小红",
          meesage: "附近居民有空调........",
          time: "11:22",
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_Xm.png"),
          title: "小何",
          meesage: "附近居民有空调........",
          time: "11:22",
          messagesParty: "你可以给我一些帮助嘛？你可以给我一些帮助嘛？",
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_Xm.png"),
          title: "明明",
          meesage: "附近居民有空调........",
          time: "11:22",
          messagesParty: "你可以给我一些帮助嘛？",
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_Xm.png"),
          title: "明明",
          meesage: "附近居民有空调........",
          time: "11:22",
          messagesParty: "你可以给我一些帮助嘛？你可以给我一些帮助嘛？",
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_Xm.png"),
          title: "明明",
          meesage: "附近居民有空调........",
          time: "11:22",
          messagesParty: "你可以给我一些帮助嘛？",
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_Xm.png"),
          title: "明明",
          meesage: "附近居民有空调........",
          time: "11:22",
          messagesParty: "你可以给我一些帮助嘛？你可以给我一些帮助嘛？",
        },
        {
          headPortrait: require("../../../assets/images/iconResources/unsplash_Xm.png"),
          title: "明明",
          meesage: "附近居民有空调........",
          time: "11:22",
          messagesParty: "你可以给我一些帮助嘛？",
        }
      ],
      Groupchat: "群聊(18)",
    }
  }

  componentDidMount = () => { }

  render() {
    const {
      friendNotificationList,
      temporaryMessageList,
      friendNotificationLista,
      Groupchat,
      systemMessageList
    } = this.state

    const {
      transferDataTitle,
      transferDataThis,
    } = this.props

    // 群消息列表
    const StemNotificationBox =
      <View>
        {friendNotificationList.map((item, index) => {
          return (
            <TouchableOpacity key={index}
              onPress={() => {
                transferDataThis.props.navigation.push('messagePage',
                  {
                    data: item,
                    Groupchat: Groupchat,
                    Judgegroupchat: true
                  })
              }}>
              <View style={styles.itemNotificationBox}
                key={index} >
                <View style={styles.row}>
                  <Image style={styles.systemPromptFriend}
                    source={item.headPortrait} />
                  {/* 标题名称/消息内容 */}
                  <View>
                    <Text style={styles.titleNotification}>
                      {item.title}
                    </Text>
                    {/* 文本超出时省略符 */}
                    <Text style={styles.newsNotification}>
                      {messageEllipsis(item.messagesParty)}
                    </Text>
                  </View>
                </View>
                {/* 消息通知时间/个数 */}
                <View style={styles.rowBoxBtn}>
                  <Text style={styles.timeNotification}>
                    {item.time}
                  </Text>
                  <View style={item.notice > 0 ?
                    styles.noticeNotification : ''}>
                    <Text style={styles.noticeNotificationText}>
                      {item.notice}
                    </Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>
          )
        })}
      </View>

    // 临时消息列表
    const TemporaryMessageList =
      <>
        {temporaryMessageList.map((item, index) => {
          return (
            <TouchableOpacity key={index}
              onPress={() => {
                transferDataThis.props.navigation.push('messagePage',
                  {
                    data: item
                  })
              }}>
              <View style={styles.itemNotificationBox}
                key={index} >
                <View style={styles.row}>
                  <Image style={styles.systemPromptFriend}
                    source={item.headPortrait} />
                  {/* 标题名称/消息内容 */}
                  <View>
                    <Text style={styles.titleNotification}>
                      {item.title}
                    </Text>
                    {/* 文本超出时省略符 */}
                    <Text style={styles.newsNotification}>
                      {messageEllipsis(item.messagesParty)}
                    </Text>
                  </View>
                </View>
                {/* 消息通知时间/个数 */}
                <View style={styles.rowBoxBtn}>
                  <Text style={styles.timeNotification}>
                    {item.time}
                  </Text>
                  <View style={item.notice > 0 ?
                    styles.noticeNotification : ''}>
                    <Text style={styles.noticeNotificationText}>
                      {item.notice}
                    </Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>
          )
        })}
      </>

    // 系统消息列表
    const SystemMessageList =
      <>
        {systemMessageList.map((item, index) => {
          return (
            <TouchableOpacity key={index}
              onPress={() => {
                transferDataThis.props.navigation.push('')
              }}>
              <View style={styles.itemMessageList}
                key={index} >
                <Text style={styles.time}>
                  {item.time}
                </Text>
                <View style={styles.containerBox}>
                  <Text style={styles.messageListTitle}>
                    {item.title}
                  </Text>
                  <Text style={styles.containerMessage}>
                    {systemEllipsis(item.systemMessageList)}
                  </Text>
                </View>
              </View>
            </TouchableOpacity>
          )
        })}
      </>

    {/* 好友列表消息通知区 */ }
    const FriendNotificationList =
      <>
        {
          friendNotificationLista.map((item, index) => {
            return (
              <TouchableOpacity key={index}
                onPress={() => {
                  transferDataThis.props.navigation.push('messagePage',
                    {
                      data: item
                    })
                }}>
                <View style={styles.itemNotificationBox}
                  key={index} >
                  <View style={styles.row}>
                    <Image style={styles.systemPromptFriend}
                      source={item.headPortrait} />
                    {/* 好友名称/消息内容 */}
                    <View>
                      <Text style={styles.titleNotification}>
                        {item.title}
                      </Text>
                      {/* 文本超出时显示省略符 */}
                      <Text numberOfLines={1}
                        style={styles.newsNotification}>
                        {messageEllipsis(item.messagesParty)}
                      </Text>
                    </View>
                  </View>
                  {/* 消息通知时间/个数 */}
                  <View style={styles.rowBoxBtn}>
                    <Text style={styles.timeNotification}>
                      {item.time}
                    </Text>
                    <View style={item.notice > 0 ?
                      styles.noticeNotification : ''}>
                      <Text style={styles.noticeNotificationText}>
                        {item.notice}
                      </Text>
                    </View>
                  </View>
                </View>
              </TouchableOpacity>
            )
          })
        }
      </>

    return (
      <View style={styles.warper}>
        {/* 消息列表 */}
        <ScrollView>
          <View style={styles.padlr}>
            {
              transferDataTitle == "群消息" ? StemNotificationBox : null ||
                transferDataTitle == "临时消息" ? TemporaryMessageList : null ||
                  transferDataTitle == "系统消息" ? SystemMessageList : null ||
                    transferDataTitle == "好友" ? FriendNotificationList : null
            }
            {/* 可滑动 */}
            {/* {transferDataTitle == "0" ? FriendNotificationList : null ||
              transferDataTitle == "1" ? StemNotificationBox : null ||
                transferDataTitle == "2" ? TemporaryMessageList : null ||
                  transferDataTitle == "3" ? SystemMessageList : null
            } */}
          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  warper: {
    backgroundColor: "#fff",
  },
  padlr: {
    paddingLeft: 15,
    paddingRight: 15
  },

  inputstyle: {
    height: 40,
    backgroundColor: "rgba(196, 196, 196, 0.25)",
    borderRadius: 5,
    textAlign: "center",
    marginLeft: 15,
    marginRight: 15,
    marginBottom: 10
  },
  itemMessageList: {
    marginTop: 15,

  },
  time: {
    textAlign: "center",
    marginBottom: 10,
    color: "#888"
  },
  containerBox: {
    width: "100%",
    backgroundColor: "#fff",
    borderRadius: 10,
    padding: 15,
    borderColor: "rgba(0, 0, 0, 0.05)",
    backgroundColor: "rgba(0, 0, 0, 0.02)",
    borderWidth: 1,
  },
  messageListTitle: {
    fontSize: 15,
    color: "#000",
    marginBottom: 10,
    fontWeight: "600"
  },
  containerMessage: {
    color: "#666",
    fontSize: 13
  },
  itemNotificationBox: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    height: 70,
    marginBottom: 8
  },
  row: {
    flexDirection: "row"
  },
  systemPromptFriend: {
    width: 48,
    height: 48,
    marginRight: 10
  },
  titleNotification: {
    fontSize: 15,
    color: "#333",
    marginBottom: 7,
  },
  newsNotification: {
    fontSize: 13,
    color: "rgba(0, 0, 0, 0.41)",
  },
  timeNotification: {
    fontSize: 13,
    color: 'rgba(0, 0, 0, 0.41)'
  },

  noticeNotification: {
    justifyContent: "center",
    alignItems: "center",
    width: 16,
    height: 16,
    marginTop: 10,
    borderRadius: 50,
    backgroundColor: "#FF0000",
  },
  noticeNotificationText: {
    color: "#fff",
    fontSize: 10,
  },
  noticeStemNotification: {
    position: "absolute",
    top: 0,
    right: 1,
    zIndex: 20,
    width: 14,
    height: 14,
    borderRadius: 50,
    backgroundColor: "#FF0000",
    color: "#fff",
    fontSize: 10,
    textAlign: "center",
    lineHeight: 14,
  },
  rowBoxBtn: {
    flexDirection: "column",
    alignItems: "flex-end"
  }
})